<template>
  <div>
    <div class="personal-msg-wrap">
      <img :src="showAvatar()" alt="" width="50px" class="personal-avatar">
      <div class="personal-msg" style="width: 60%">
        <p class="personal-msg-name">{{sessionInfo.from===userInfo.id?sessionInfo.toName:sessionInfo.fromName}}
          <el-tag type="warning" size="mini" class="personal-msg-tag">
            {{ sessionInfo.from===userInfo.id?sessionInfo.toPosition:sessionInfo.fromPosition }}
          </el-tag>
        </p>
      </div>
      <div class="personal-msg">
        <p class="personal-msg-more">会诊时间：<span>{{sessionInfo.consultationTime}}</span> <a @click="InfoEmit" class="personal-msg-modifier">进入会诊</a></p>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 正在进行的会诊
   */
import { mapGetters } from 'vuex'
export default {
  name: 'session',
  props: ['sessionInfo'],
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    InfoEmit() {
      this.$emit('sessionInfo', this.sessionInfo)
    },
    showAvatar() {
      return this.sessionInfo.from === this.userInfo.id ? this.sessionInfo.toAvatar : this.sessionInfo.fromAvatar
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss" scoped>
.personal-msg-wrap {
  margin: 20px 80px;
  height: 100px;
  border: 1px solid $mainBdColor;
  border-radius: 5px;
  padding: 20px;
  display: flex;
.personal-avatar{
  float: left;
  border-radius: 10%;
  width: 10%;
//margin-top: 35px;
}
.personal-msg{
  line-height: 1;
  overflow: hidden;
  padding-left: 20px;
  color:$mainTextColor;
.personal-msg-name{
  font-weight: 600;
  font-size: 18px;
  margin: 0px;
  line-height: 40px;
.personal-msg-tag{
  margin-left: 20px;
  vertical-align: 1px;
}
}
.personal-msg-more{
  line-height: 20px;
span{
  margin-left: 5px;
}
}
.personal-msg-modifier{
  display: inline-block;
  margin-top: 20px;
  color: #509ad9;
}
}
}
</style>
